<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
	{
	style: {
	navigationBarTitleText: '新增地址',
	"enablePullDownRefresh": false,
	},
	}
</route>
<template>
	<view class="apply-form">
		<view class="m-4">
			<wd-form ref="formRef" :model="model" :rules="rules">
				<wd-cell-group>
					<wd-cell title="姓名" required title-width="100px" vertical prop="real_name">
						<wd-input clearable v-model="model.real_name" placeholder="请输入姓名" :no-border="true" />
					</wd-cell>

					<wd-cell title="手机号码" title-width="100px" prop="mobile" vertical>
						<wd-input clearable v-model="model.mobile" placeholder="请输入联系电话" :maxlength="11"
							:no-border="true" />
					</wd-cell>

					<wd-cell title="微信号" required title-width="100px" vertical prop="wechat">
						<wd-input clearable v-model="model.wechat" placeholder="请输入姓名" :no-border="true" />
					</wd-cell>

					<wd-cell title="地区" title-width="100px" prop="province" vertical>
						<wd-col-picker placeholder="请选择地区" v-model="city" :columns="area" :column-change="columnChange"
							:no-border="true" @confirm="handleConfirmArea"></wd-col-picker>
					</wd-cell>

				</wd-cell-group>

			</wd-form>

			<view class="mt-10">
				<wd-button type="primary" block :round="false" @click="handleSubmit">立即申请</wd-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useColPickerData
	} from '@/hooks/useColPickerData'
	const {
		colPickerData,
		findChildrenByCode
	} = useColPickerData()
	import {
		showToast
	} from '@/utils/uni';
	import useUserStore from "@/store/user";
	import {
		applyDistribution
	} from "@/service/user";
	defineOptions({
		options: {
			styleIsolation: 'shared',
		}
	});
	const userStore = useUserStore();
	const formRef = ref();
	const model = reactive({
		real_name: "",
		mobile: "",
		province: "",
		city: "",
		district: "",
		wechat: ""
	});
	const city = ref([]);

	const area = computed(() => {
		const list = [colPickerData.map((item) => {
			return {
				value: item.value,
				label: item.text
			}
		})]

		if (model.province_id) {
			list.push(findChildrenByCode(colPickerData, model.province_id).map((item) => {
				return {
					value: item.value,
					label: item.text
				}
			}))
		}

		if (model.city_id) {
			list.push(findChildrenByCode(colPickerData, model.city_id).map((item) => {
				return {
					value: item.value,
					label: item.text
				}
			}))
		}

		return list
	})

	const emit = defineEmits(['success'])

	const rules = {
		real_name: [{
			required: true,
			message: '请输入姓名'
		}],
		wechat: [{
			required: true,
			message: '请输入微信号'
		}],
		mobile: [{
			required: true,
			message: '请输入电话'
		}],
		province: [{
			required: true,
			message: '请选择地区'
		}],

	}


	const columnChange = ({
		selectedItem,
		resolve,
		finish
	}) => {
		const areaData = findChildrenByCode(colPickerData, selectedItem.value)
		if (areaData && areaData.length) {
			resolve(
				areaData.map((item) => {
					return {
						value: item.value,
						label: item.text
					}
				})
			)
		} else {
			finish()
		}
	}

	function handleConfirmArea({
		selectedItems,
		value
	}) {
		const [province, city, district] = selectedItems.map(item => item.label);
		const [province_id, city_id, district_id] = value;
		model.province = province_id;
		model.city = city_id;
		model.district = district_id;

		// console.log(province, city, district, value)
	}


	function handleSubmit() {
		formRef.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					applyDistribution(model).then(res => {
						showToast("申请成功");
						emit("success");
						userStore.getUserInfo();
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>

<style lang="scss" scoped>
	.apply-form {
		--wot-input-inner-height-no-border: 92rpx;
		--wot-input-inner-height: 92rpx;
		--wot-cell-vertical-top: 14rpx;
	}

	:deep(.wd-cell__body) {
		padding: 0 20rpx;
		border: 1px solid #DFDFDF;
		border-radius: 4rpx;
	}
</style>